﻿@*YoursLC有源低代码 Create:φ创建者Creatorφ 2022-05-07 19:30:24 添加或编辑-此文件放置于Views/Demo01VariousControls/中*@

@using Think9.Models;
@model Think9.Models.Demo01VariousControlsModel
@{ ViewBag.Title = "Add";
	Layout = "~/Areas/Shared/_LayuiForm.cshtml"; }

@*Demo01各种控件*@
<style>
	/* 防止table的下拉列表被隐藏*/
	.layui-table-cell {
		overflow: visible;
	}
	.layui-table-box {
		overflow: visible;
	}
	.layui-table-body {
		overflow: visible; /* 与手机端冲突 */
	}
	/* 设置下拉框的高度与表格单元相同 */
	td .layui-form-select {
		margin-top: -3px;
		margin-left: -7px;
		margin-right: -7px;
	}
	.layui-table-view .layui-table th {
		overflow: hidden;
	}
</style>
<form class="layui-form" lay-filter="formUser">
<input style="display:none" id="_userid" value="@ViewBag.UserId">@*用户id*@
<input style="display:none" id="_attachmentId">@*附件id*@
<input style="display:none" id="_type" value="@ViewBag.Type">@*add或edit*@
<input style="display:none" id="prc_fid" value="@ViewBag.FId">@*当前流程编码*@
<input style="display:none" id="prc_id"  value="@ViewBag.PrcId">@*当前流程步骤id*@
<input style="display:none" id="prc_no"  value="@ViewBag.PrcNo">@*当前流程步骤编码*@
<input style="display:none" id="sys_plit" value="@ViewBag.Split">@*多选框字符分割*@
<input style="display:none" id="sys_listid" value="@ViewBag.ListId">
<input style="display:none" id="Pu_value">
<input style="display:none" id="Pu_tbid">
<input style="display:none" id="Pu_indexid">
<input style="display:none" id="Pu_id">
<input style="display:none" id="Pu_v">
<div class="layui-form">
 <div class="layui-form-item"  style="text-align: right;">
	<div class="layui-btn-group">
			<button type="button" class="layui-btn" id="sys_att">附件</button>
			<button type="button" class="layui-btn" lay-submit lay-filter="edit">保存按钮</button>
			<button type="button" class="layui-btn" lay-submit lay-filter="next">转交按钮</button>
			<button type="button" class="layui-btn" lay-submit lay-filter="finish">结束按钮</button>
	 </div>
  </div>

	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<label class="layui-form-label required">自动编号</label>
			<div class="layui-input-block">
				<input type='text' name='inAutoNumber' id='inAutoNumber' autocomplete='off' class='layui-input'  maxlength='30'    lay-verify='required'  placeholder='自动编号'>
				</div>
			</div>
		<div class="layui-col-md6">
			<label class="layui-form-label">输入文本框1</label>
			<div class="layui-input-block">
				<input type='text' name='inEnterTextBox1' id='inEnterTextBox1' autocomplete='off' class='layui-input'  maxlength='30'    placeholder='输入文本框1'>
				</div>
			</div>
	 </div>
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<label class="layui-form-label">输入文本框2</label>
			<div class="layui-input-block">
				 <textarea class='layui-textarea' id='inEnterTextBox2' name='inEnterTextBox2'     placeholder='输入文本框2'></textarea>
				</div>
			</div>
		<div class="layui-col-md6">
			<label class="layui-form-label">单选</label>
			<div class="layui-input-block">
				@foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.SelectList).Where(x => x.ClassID == "inSingleChoice"))
				{
					<input type="radio"  name="@item.ClassID" value="@item.Value" title="@item.Text">
				}
				</div>
			</div>
	 </div>
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<label class="layui-form-label">日期选择</label>
			<div class="layui-input-block">
				<input  name='inDateSelection' id='inDateSelection'  class='layui-input' autocomplete='off'  onClick="WdatePicker({ el: this,dateFmt: 'yyyy-MM-dd'})" placeholder='日期选择'   lay-verify='date' >
			</div>
		</div>
		<div class="layui-col-md6">
			<label class="layui-form-label">下拉选择</label>
			<div class="layui-input-block">
				<select id="inDropDownSelection" name="inDropDownSelection"  lay-filter = "inDropDownSelection"  >
					<option value="">==请选择==</option>
						@foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.SelectList).Where(x => x.ClassID == "inDropDownSelection"))
						{
							 <option value="@item.Value">@item.Text</option>
						}
				</select>
				</div>
			</div>
	 </div>
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<label class="layui-form-label">下拉选择树</label>
			<div class="layui-input-block">
				<select id="inDropDownSelectionTree" name="inDropDownSelectionTree"  lay-filter = "inDropDownSelectionTree"  >
					<option value="">==请选择==</option>
						@foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.SelectList).Where(x => x.ClassID == "inDropDownSelectionTree"))
						{
							 <option value="@item.Value">@item.Text</option>
						}
				</select>
				</div>
			</div>
		<div class="layui-col-md6">
			<label class="layui-form-label">文本框弹出1</label>
			<div class="layui-input-block">
				<input type='text' name='inTextBoxPopup1' id='inTextBoxPopup1' autocomplete='off' class='layui-input'  maxlength='10'    placeholder='文本框弹出1'>
				</div>
			</div>
	 </div>
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<label class="layui-form-label">文本框弹出2</label>
			<div class="layui-input-block">
				<input type='text' name='inTextBoxPopup2' id='inTextBoxPopup2' autocomplete='off' class='layui-input'  maxlength='30'    placeholder='文本框弹出2'>
				</div>
			</div>
		<div class="layui-col-md6">
			<label class="layui-form-label">日期加时间</label>
			<div class="layui-input-block">
				<input  name='inDatePlusTime' id='inDatePlusTime'  class='layui-input' autocomplete='off'  onClick="WdatePicker({ el: this,dateFmt: 'yyyy-MM-dd HH:mm'})" placeholder='日期加时间'   >
			</div>
		</div>
	 </div>
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<label class="layui-form-label">多选</label>
			<div class="layui-input-block">
				<input style="display: none" id="inMultipleChoice_Exa" name="inMultipleChoice_Exa" >
				@foreach (valueTextEntity item in ((IEnumerable<valueTextEntity>)ViewBag.SelectList).Where(x => x.ClassID == "inMultipleChoice"))
				{
					<input type="checkbox"  disabled='disabled'  name="@item.ClassID" value="@item.Value" title="@item.Text" lay-filter = "inMultipleChoice"  lay-skin="primary">
				}
				</div>
			</div>
		<div class="layui-col-md6">
			<label class="layui-form-label">图片</label>
			<div class="layui-input-block">
				<input style='display:none' id='inPicture_Exa'  name='inPicture_Exa'>
				<span> <img id='inPicture'  src='~/images/0.gif' alt='0.gif' style='height:125px;width:125px;'>  </span>
			</div>
		</div>
	 </div>
</div>
	<div class="layui-table-box" id="div_tb_SubTable01">
		<table class="layui-hide" id="tb_SubTable01" lay-filter="tableFilter"> </table></div>
</form>
<script>
	layui.config({
		base: '/self_js/'  /*自定义的js文件 位于wwwroot/self_js文件夹中*/
	});
	layui.use(["form", "exLayer", "exUtils",  "table", "Demo01VariousControls"], function () {
		let form = layui.form;
		let layer = layui.layer;
		let table = layui.table;
		let exLayer = layui.exLayer;
		let exUtils = layui.exUtils;
		let mySelf = layui.Demo01VariousControls;

		let $ = layui.$;
		form.render();

		getFormVal();//设置多选框和图片的显示--无多选框和图片可删除
		lockForEditing();//编辑时锁定
		//根据步骤编码设置控件disabled
		mySelf.setStateByFlow($('#prc_no').val());
		//赋值--不包括多选框和图片
		form.val("formUser", {
			"inAutoNumber": "@Model.inAutoNumber"
			,"inEnterTextBox1": "@Model.inEnterTextBox1"
			,"inEnterTextBox2": "@Model.inEnterTextBox2"
			,"inSingleChoice": "@Model.inSingleChoice"
			,"inDateSelection": showDate("@Model.inDateSelection")
			,"inDropDownSelection": "@Model.inDropDownSelection"
			,"inDropDownSelectionTree": "@Model.inDropDownSelectionTree"
			,"inTextBoxPopup1": "@Model.inTextBoxPopup1"
			,"inTextBoxPopup2": "@Model.inTextBoxPopup2"
			,"inDatePlusTime": "@Model.inDatePlusTime"
		});
		//设置多选框和图片的显示
		function getFormVal() {
			//复选框 多选
			$('#inMultipleChoice_Exa').val('@Model.inMultipleChoice');
			 $('input[name=inMultipleChoice]').each(function () {
				if ($('#inMultipleChoice_Exa').val().indexOf($('#sys_plit').val() + $(this).val() + $('#sys_plit').val()) != -1) {
					$(this).attr('checked', true);
				}
			});

			//图片
			$('#inPicture_Exa').val('@Model.inPicture');
			if ($('#inPicture_Exa').val() == '') {
				$('#inPicture').attr('src', '/images/0.gif'); 
			}
			else{
				$('#inPicture').attr('src', '/UserImg/@Model.inPicture');
			}

		}
		//编辑时锁定
		function lockForEditing() {
			if ($('#_type').val() == 'edit') {
				$('#inAutoNumber').attr('disabled','disabled');//自动编号
				$("input[name='inSingleChoice']").attr('disabled','disabled');//单选
			}
		}
		$('#inTextBoxPopup1').on('click', function () {
			exLayer.open('选择文本框弹出1', '/Demo01VariousControls/PopUpSelectValue?tbid=_main&indexid=inTextBoxPopup1&id=_n&from=add', '100%', '100%', '0px', '0px', null, null);
		});
		$('#inTextBoxPopup2').on('click', function () {
			exLayer.open('选择文本框弹出2', '/Demo01VariousControls/PopUpSelectValue?tbid=_main&indexid=inTextBoxPopup2&id=_n&from=add', '100%', '100%', '0px', '0px', null, null);
		});
		$('#inPicture').on('click', function () {
			exLayer.open('图片上传', '/Com/FileManage/PictureUplaod?tbid=tb_Demo01VariousControls&indexid=inPicture&from=add&fname=' + $('#inPicture')[0].alt, '100%', '100%', '0px', '0px', null, null);
		});

		//复选框 多选
		form.on('checkbox(inMultipleChoice)', function (data) {
			var arr_inMultipleChoice = [];
			$('input[name=inMultipleChoice]:checked').each(function () {
			arr_inMultipleChoice.push($(this).val());
			});
			var _inMultipleChoice = $('#sys_plit').val();
			for (const elem of arr_inMultipleChoice) {
				_inMultipleChoice = _inMultipleChoice + elem + $('#sys_plit').val();
			}
			if (_inMultipleChoice == $('#sys_plit').val()) {
				_inMultipleChoice = '';
			}
			$('#inMultipleChoice_Exa').val(_inMultipleChoice);
			return false;
		});


		$('#sys_att').on('click', function () {
			exLayer.open('附件上传', '/Com/FileManage/Attachment?fwid=' + $('#prc_fid').val() + '&listid=' + $('#sys_listid').val() + '&prcid=' + $('#prc_id').val() + '&userid=' + $('#_userid').val() + '&attid=' + $('#_attachmentId').val(), '100%', '100%', '0px', '0px', null, null);
		});
		//点击保存按钮
		form.on("submit(edit)", function (data) {
			exLayer.confirm('你确定保存吗', function () {
				var _gridList = [];
				mySelf.foreachGridTable(_gridList);//遍历子表table取数
				exUtils.ajax('/Demo01VariousControls/SaveData', 'post', {
					model: data.field, 'gridlist': _gridList, listid: $('#sys_listid').val(), prcno: $('#prc_no').val(), type: $('#_type').val(), att: $('#_attachmentId').val() }, true).done(function (response) {
					exLayer.greenTickMsg(response.message, function () {
					$(window.parent.document).find('#search').click();
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error);
			});
			return false;
			})
		});
		//点击转交按钮
		form.on('submit(next)', function (data) {
			exLayer.confirm('你确定转交吗', function () {
				var _gridList = [];
				mySelf.foreachGridTable(_gridList);
				exUtils.ajax('/Demo01VariousControls/NextStep', 'post', { model: data.field, 'gridlist': _gridList, listid: $('#sys_listid').val(), prcno: $('#prc_no').val(), type: $('#_type').val(), att: $('#_attachmentId').val() }, true).done(function (response) {
					$('#sys_listid').val(response.extra);
					exLayer.open('流程转交', '/SysFlow/PrcsNext/Next?listid=' + response.extra + '&flid=' + $('#prc_fid').val(), '100%', '100%', '0px', '0px', null, null);
				}).fail(function (error) {
					console.log(error);
				});
			return false;
			})
		});
		//点击结束按钮
		form.on("submit(finish)", function (data) {
			exLayer.confirm('你确定结束吗', function () {
				var _gridList = [];
				mySelf.foreachGridTable(_gridList);//遍历子表table取数
				exUtils.ajax('/Demo01VariousControls/Finish', 'post', {
					model: data.field, 'gridlist': _gridList, listid: $('#sys_listid').val(), prcno: $('#prc_no').val(), type: $('#_type').val(), att: $('#_attachmentId').val() }, true).done(function (response) {
					exLayer.greenTickMsg(response.message, function () {
					$(window.parent.document).find('#search').click();
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error);
			});
			return false;
			})
		});


			
		let tb_SubTable01 = table.render({
			elem: "#tb_SubTable01",
			url: "/Demo01VariousControls/GetDataFromSubTable01?tbid=tb_SubTable01"+"&listid=" + $('#sys_listid').val()+"&from=" + $('#_type').val(),
			page: false,
			cols: [[
				{ field: "flag", title: "flag",  hide: true }
				,{ field: "v1", title: "文本框", width: 120, templet: '#tb_SubTable01v1' }
				,{ field: "v2", title: "日期", width: 140, templet: '#tb_SubTable01v2' }
				,{ field: "v3", title: "日期&#x2B;时间", width: 160, templet: '#tb_SubTable01v3' }
				,{ field: "v4", title: "弹出单选", width: 140, templet: '#tb_SubTable01v4' }
				,{ field: "v5", title: "弹出多选", width: 140, templet: '#tb_SubTable01v5' }
				,{ field: "v6", title: "下拉选择", width: 140, templet: '#tb_SubTable01v6' }
				,{ field: "v7", title: "下拉树", width: 140, templet: '#tb_SubTable01v7' }
				,{ field: "v8", title: "图片", width: 160, templet: '#tb_SubTable01v8' }
				,{ title: "", align: "center", templet: "#addordelitem" }
			]],
			done: function (res, curr, count) {
				//手机给div设定宽度，要不表头显示不全
				if ($(window).width() < 768) {
					//$('th').hide();//表头隐藏
					$('#div_tb_SubTable01').css({ 'width': '1240'});
				}
				$('.layui-table .layui-table-cell > span').css({ 'font-weight': 'bold' });
				console.log(res, curr, count);
				}
		
			});

	   table.on("tool(tableFilter)", function (obj) {
		let data = obj.data;
		switch (obj.event) {
			case "addGrid":
				addGrid(data);
				break;
			case "delGrid":
				delGrid(data);
				break;
		 }
		});

		//子表添加一条数据 无子表可删除
		function addGrid(data) {
			var _gridList = [];
			mySelf.getTopGridTable(_gridList);//只取首行
			exUtils.ajax("/Demo01VariousControls/AddGrid", "post", { model: data.field, "list": _gridList, tbid: data.TbId, listid: $('#sys_listid').val() }, true).done(function (response) {
				$("#sys_listid").val(response.extra);
				tableRender(data.TbId);//子表数据刷新
			}).fail(function (error) {
				console.log(error);
			});
		}

		//子表删除一条数据 无子表可删除
		function delGrid(data) {
			exLayer.confirm("确定要删除吗？", function () {
				exUtils.ajax("/Demo01VariousControls/DelGrid", "post", { flag: data.flag, listid: data.ListId }, true).done(function (response) {
					tableRender(data.TbId);//子表数据刷新
					 exUtils.tableSuccessMsg('删除成功！');
				}).fail(function (error) {
					console.log(error);
				});
			})
		}

		//子表刷新
		function tableRender(tbid) {
			if (tbid == "tb_SubTable01") {
				tb_SubTable01.reload({
					url: "/Demo01VariousControls/GetDataFromSubTable01?tbid=tb_SubTable01" + "&listid=" + $('#sys_listid').val()+"&from=" + $('#_type').val()
				});
			}
		}

		//弹出页面关闭后为控件赋值 无弹出页面可删除
		$("#Pu_value").click(function () {
			mySelf.getValueFromPopUp();//控件赋值
			readValue();//执行数据读取
		});

		//数据读取
		function readValue() {
			var _gridList = [];
			mySelf.getSelectGridTable(_gridList, $('#Pu_tbid').val(), $('#Pu_id').val());

			var _controlsList = [];
			$.each($("form").serializeArray(), function (i, field) {
				_controlsList.push({ ControlID: field.name, ControlValue: field.value });
			  /*  alert(field.name + ":" + field.value);*/
			});
			//还要将禁用的控件push

			exUtils.ajax("/Demo01VariousControls/AfterControlSelect", "post", { controlslist: _controlsList, "gridlist": _gridList, id: $('#Pu_id').val(), tbid: $('#Pu_tbid').val(), indexid: $('#Pu_indexid').val(), value: $('#Pu_value').val() }, true).done(function (response) {
				lists = response.list;
				console.log(lists);
				//使用后台返回的lists，为控件赋值
				mySelf.setValueByList(lists);

				form.render();//一定要加
			}).fail(function (error) {
				console.log(error);
			});

			return false;
		}

	});
</script>
<!-- 添加或删除 排除了统计行 -->
<script type='text/html' id='addordelitem'>
    {{#  if(d.Id >= 0){ }}
    {{#  if(d.Id == 0){ }}
    <a class='layui-btn layui-btn-xs' title='添加数据' lay-event='addGrid' id='addGrid'><i class='fa fa-plus'></i></a>
    {{#  } else{ }}
    <a class='layui-btn layui-btn-danger layui-btn-xs' title='删除数据' lay-event='delGrid' id='delGrid'><i class='fa fa-minus'></i></a>
    {{#  } }}
    {{#  } }}
</script>
<!-- 文本框 -->
<script type="text/html" id="tb_SubTable01v1">
	<input type='text' name='tb_SubTable01v1' value = '{{d.v1_Exa}}' autocomplete='off' class='layui-input'  maxlength='30' style='height:30px;'  placeholder='文本框'  {{d.v1_Lock}}>
</script>
<!-- 日期 -->
<script type="text/html" id="tb_SubTable01v2">
	<input name='tb_SubTable01v2' value = '{{d.v2_Exa}}' autocomplete='off' onClick="WdatePicker({ el: this,dateFmt: 'yyyy-MM-dd'})" class='layui-input' style='height:30px;'  placeholder='日期' {{d.v2_Lock}}>
</script>
<!-- 日期+时间 -->
<script type="text/html" id="tb_SubTable01v3">
	<input name='tb_SubTable01v3' value = '{{d.v3_Exa}}' autocomplete='off' onClick="WdatePicker({ el: this,dateFmt: 'yyyy-MM-dd HH:mm'})" class='layui-input' style='height:30px;'  placeholder='日期+时间' {{d.v3_Lock}}>
</script>
<!-- 弹出单选 -->
<script type="text/html" id="tb_SubTable01v4">
	<input type='text' name='tb_SubTable01v4' value = '{{d.v4_Exa}}' autocomplete='off' class='layui-input'  maxlength='30' style='height:30px;'  placeholder='弹出单选' {{d.v4_JS}} {{d.v4_Lock}}>
</script>
<!-- 弹出多选 -->
<script type="text/html" id="tb_SubTable01v5">
	<input type='text' name='tb_SubTable01v5' value = '{{d.v5_Exa}}' autocomplete='off' class='layui-input'  maxlength='200' style='height:30px;'  placeholder='弹出多选' {{d.v5_JS}} {{d.v5_Lock}}>
</script>
<!-- 下拉选择 -->
<script type='text/html' id='tb_SubTable01v6'>
	<div class='layui-input-inline' style='width:100px;'>
		<select name='tb_SubTable01v6' {{d.v6_Lock}} lay-filter='tb_SubTable01Filter' data-value={{d.v6}}>
		<option value="">==请选择==</option>
		{{d.v6_Exa}}
		</select>
	</div>
</script>
<!-- 下拉树 -->
<script type='text/html' id='tb_SubTable01v7'>
	<div class='layui-input-inline' style='width:100px;'>
		<select name='tb_SubTable01v7' {{d.v7_Lock}} lay-filter='tb_SubTable01Filter' data-value={{d.v7}}>
		<option value="">==请选择==</option>
		{{d.v7_Exa}}
		</select>
	</div>
</script>
<!-- 图片 -->
<script type='text/html' id='tb_SubTable01v8'>
	<input type='text' name='tb_SubTable01v8' value = '{{d.v8_Exa}}'  autocomplete='off'  class='layui-input' style='height:30px;'  placeholder='图片上传' {{d.v8_JS}}>
</script>
<!-- 子表onclick调用 -->
<script>
	function PopUpSelectValue(tbid, indexid, id) {
		var url = '/Demo01VariousControls/PopUpSelectValue?';
		PopSelectValue(tbid, indexid, id, url);
	}
	function PopUpImgUplaod(tbid, indexid, id, fname) {
		PopImgUplaod2(tbid, indexid, id, fname);
	}
</script>